<template>
  <div class="app-container">
    <h1>用户管理系统</h1>
    <div class="operation-buttons">
      <el-button type="primary" @click="openAddDialog">新增用户</el-button>
      <el-button type="success" @click="openEditDialog">编辑用户</el-button>
    </div>
    <UserDialog
      ref="userDialogRef"
      :is-edit="isEditMode"
      :init-data="editUser"
      @close="handleClose"
      @submit="handleSubmit"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import UserDialog from './dialog.vue';
import type { UserFormData } from './dialog.vue';

const userDialogRef = ref<InstanceType<typeof UserDialog>>();
const isEditMode = ref(false);
const editUser = ref<UserFormData>({
  username: 'admin123',
  realName: '管理员',
  roleType: 'system',
  roleName: '超级管理员',
  birthDate: '1990-01-01 00:00:00',
  gender: 'male',
  status: 'normal',
  phone: '13800138000',
  email: 'admin@example.com',
  organization: 'university'
});

const openAddDialog = () => {
  isEditMode.value = false;
  userDialogRef.value?.openDialog();
};

const openEditDialog = () => {
  isEditMode.value = true;
  userDialogRef.value?.openDialog();
};

const handleClose = () => {
  console.log('对话框关闭');
};

const handleSubmit = (data: UserFormData) => {
  if (isEditMode.value) {
    console.log('编辑用户数据：', data);
    // 实际项目中可添加接口请求逻辑
  } else {
    console.log('新增用户数据：', data);
    // 实际项目中可添加接口请求逻辑
  }
};
</script>

<style scoped>
.app-container { padding: 30px; max-width: 1200px; margin: 0 auto; }
.operation-buttons { margin: 20px 0; gap: 10px; display: flex; }
h1 { color: #1989fa; font-size: 24px; margin-bottom: 20px; }
</style>